<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>MsgReceive</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../commons/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!-- 加载bootstrap-select -->
    <link href="../commons/bootstrap-select-1.13.9-dist/css/bootstrap-select.min.css" rel="stylesheet">
    <!-- 加载bootstrap-treeview -->
    <link href="../commons/bootstrap-treeview-1.2.0-dist/bootstrap-treeview.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../commons/css/currency.css">


    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">CIMS-校园即时通讯系统</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="msgIndex">首页</a></li>
                <li class=""><a href="msgSend" >发消息</a></li>
                <li class="active"><a href="msgReceive"><span id="noAnswerCount" class="badge pull-right" style="background-color:red"></span>收消息</a>
                </li>
            </ul>
            <ul class="nav navbar-nav" style="float: right">
                <li class=""><a id="loginUser_nav"></a></li>
                <li class=""><a id="logout_nav">注销</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="page-header">
        <h3>接收消息</h3>
    </div>
</div>


<div class="container" id="msg_receive_container">

</div>

<div class="footer ">
    <div class="container">
        <div class="row footer-bottom">
            <ul class="list-inline text-center">
                <li> Campus Instant Messaging System @2020 杭州职业技术学院 软件技术专业</li>
            </ul>
        </div>
    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../commons/js/jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../commons/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../commons/bootstrap-treeview-1.2.0-dist/bootstrap-treeview.min.js"></script>
<script src="../commons/bootstrap-select-1.13.9-dist/js/bootstrap-select.min.js"></script>
<!--加载chart.js -->
<script src="../commons/Chart.js-2.9.3/dist/Chart.min.js"></script>
<script src="../commons/js/login.js"></script>

<script>
    var pn, isLastPage = false;
    $(function () {
        pn = 1;
        load_noAnswer_Count();
        load_msg_receive(pn++);
    });

    //滚动加载功能
    window.addEventListener("scroll", function (e) {
        if (($(document).scrollTop()) >= ($(document).height() - $(window).height())) {
            if (pn != 1 && !isLastPage)
                load_msg_receive(pn++);
        }
    });

    //导航栏未读消息提示
    function load_noAnswer_Count() {
        $.ajax({
            url: "noAnswerCount",
            type: "GET",
            dataType: "json",
            success: function (result) {
                if (result.code == 100) {
                    //查询成功，解析并显示数据
                    $("#noAnswerCount").empty().append(result.extend.noAnswerCount);
                } else {

                }

            }
        })
    }

    //现获取所有接受消息
    function load_msg_receive(pn) {
        $.ajax({
            url: "msgAnswers",
            type: "GET",
            data: {"pn": pn},
            dataType: "json",
            beforeSend: function () {
                if (pn == 1) {
                    $("#msg_receive_container div").remove();
                }
                $("#msg_receive_container").append("<div id='loadMsg'>正在加载数据，请稍后...</div>");
            },
            success: function (result) {
                if (result.code == 100) {
                    $("#loadMsg").remove();
                    //查询成功，解析并显示数据
                    build_msgs_panel(result);
                    // if (pn == result.extend.pageInfo.pages) {
                    //     isLastPage = true;
                    //     $("#msg_receive_container").append("<div id='loadMsg' align='center'>...最后一页...</div>");
                    // }
                } else {

                }
            },
            error: function () {
                $("#loadMsg").remove();
                $("#msg_receive_container").append("<div id='loadMsg'>查询出错，请稍后再试！</div>");
            }
        });
    }

    function build_msgs_panel(result) {
        var msgAnswers = result.extend.pageInfo.list;
        $.each(msgAnswers, function (index, msgAnswer) {

            var titleH = $("<h4></h4>").append(msgAnswer.msg.msgTitle).append($("<small></small>").addClass("pull-right").append("FROM:").append($("<strong></strong>").append(msgAnswer.sendUser.userName)).append("[" + msgAnswer.msg.msgTypeText + "]" + msgAnswer.msg.msgSendTime));

            var panelHeadingDiv = $("<div></div>").addClass("panel-heading").append(titleH);
            var contentP = $("<p></p>").append(msgAnswer.msg.msgContent);
            var operationP;


            if (msgAnswer.msg.msgType == 1) {
                var operationButton;
                if (msgAnswer.msgState >= 1) {
                    operationButton = $("<button></button>").addClass("btn btn-defaul").attr({"disabled": "disabled"}).append("已查收");
                } else {
                    operationButton = $("<button></button>").addClass("btn btn-prmary answer_btn").attr({
                        "type": "button",
                        "msg-type": msgAnswer.msg.msgType,
                        "answer-id": msgAnswer.id
                    })
                        .append($("<span></span>").addClass("glyphicon glyohicon-record")).append("点击查收")
                }

                operationP = $("<p></p>").addClass("pull-right").append(operationButton);
            }

            if (msgAnswer.msg.msgType == 2) {
                if (msgAnswer.msgState >= 1) {
                    operationP = $("<span></span>").addClass("btn btn-light babel label-success").append("已回复:").append(msgAnswer.msgAnswerContent);
                } else {
                    operationP = $("<div></div>").addClass("input-group pull-right")
                        .append($("<input></input>").addClass("form-control")
                            .attr({
                                "type": "text",
                                "placeholder": "请输入内容",
                                // "id": "reply_text_" + msgAnswer.msgId
                                "name": "msgAnswerContent1",
                            }))
                        .append($("<span></span>").addClass("input-group-btn")
                            .append($("<button></button>").addClass("btn btn-primary answer_btn")
                                .attr({
                                    "type": "button",
                                    "msg-type": msgAnswer.msg.msgType,
                                    "answer-id": msgAnswer.id
                                })
                                .append($("<span></span>").addClass("glyphicon glyphicon-share-alt")).append(" 回复")));
                }


            }

            if (msgAnswer.msg.msgType == 3) {
                if (msgAnswer.msgState == 1) {
                    operationP = $("<span></span>").addClass("pull-right label");
                    if (msgAnswer.msgVote == 1) {
                        operationP.addClass("label-success").append("已赞成: ").append(msgAnswer.msgVoteReason);
                    } else {
                        operationP.addClass("label-danger").append("已反对: ").append(msgAnswer.msgVoteReason);
                    }
                } else {
                    operationP = $("<div></div>").addClass("input-group col-sm-6 pull-right")
                        .append($("<input></input>").addClass("form-control")
                            .attr({
                                "type": "text",
                                "placeholder": "请输入内容",
                                "name": "msgVoteReason1"
                            }))
                        .append($("<span></span>").addClass("input-group-btn")
                            .append($("<button></button>").addClass("btn btn-primary answer_btn")
                                .attr({
                                    "type": "button",
                                    "msg-type": msgAnswer.msg.msgType,
                                    "answer-id": msgAnswer.id,
                                    "msg-vote": 1
                                })
                                .append($("<span></span>").addClass("glyphicon glyphicon-ok-circle")).append(" 赞成"))

                            .append($("<button></button>").addClass("btn btn-danger answer_btn")
                                .attr({
                                    "type": "button",
                                    "msg-type": msgAnswer.msg.msgType,
                                    "answer-id": msgAnswer.id,
                                    "msg-vote": 0
                                })
                                .append($("<span></span>").addClass("glyphicon glyphicon-remove-circle")).append(" 反对"))
                        );
                }

            }


            var panelBodyDiv = $("<div></div>").addClass("panel-body").append(contentP).append(operationP);
            var panelDiv;
            if (msgAnswer.msgState >= 1) {
                panelDiv = $("<div></div>").addClass("panel panel-success").append(panelHeadingDiv).append(panelBodyDiv);
            } else {
                panelDiv = $("<div></div>").addClass("panel panel-danger").append(panelHeadingDiv).append(panelBodyDiv);
            }
            // $("#msg_receive_container").append(panelDiv);
            var msgTypeHidden = $("<input></input>").attr({
                "type": "hidden",
                "name": "msg.msgType",
                "value": msgAnswer.msg.msgType,
            });
            var msgContentHidden = $("<input>").attr({
                "type": "hidden",
                "name": "msgAnswerContent"
            });
            var msgReasonHidden = $("<input>").attr({
                "type": "hidden",
                "name": "msgVoteReason"
            });

            $("#msg_receive_container").append($("<form></form>").attr({"id": "msg_reply_frm_" + msgAnswer.id}).append(panelDiv).append(msgTypeHidden).append(msgContentHidden).append(msgReasonHidden));
        });
    }

    $(document).on("click", ".answer_btn", function () {
        var id = $(this).attr("answer-id");
        var msgType = $(this).attr("msg-type");
        if (msgType == 3) {
            $("<input></input>").attr({
                "type": "hidden",
                "name": "msgVote"
            }).val($(this).attr("msg-vote")).appendTo("#msg_reply_frm_" + id);
        }
        $("#msg_reply_frm_" + id + " [name='msgAnswerContent']").val($("#msg_reply_frm_" + id + " [name='msgAnswerContent1']").val())
        $("#msg_reply_frm_" + id + " [name='msgVoteReason']").val($("#msg_reply_frm_" + id + " [name='msgVoteReason1']").val())
        $.ajax({
            url: "msgAnswer/" + id,
            data: $("#msg_reply_frm_" + id).serialize(),
            type: "put",
            dataType: "json",
            success: function (result) {
                if (result.code == 100) {
                    pn = 1;
                    load_msg_receive(pn++);
                    load_noAnswer_Count();
                }
            }
        })
    })
</script>

</body>
</html>
